<template>
  <view class="workBenchBox" >
    <!-- 导航 -->
    <view class="workBenchNav">
      <view class="sumManage" :style="{backgroundImage: 'url(' + bgImage +')'}">
        <view class="sumManage-l">
          <view class="sumManage-l-t">聚合管理</view>
          <view class="txt-box top-a">
            <view class="txt">
              <view class="dot"></view>
              <view class="txt-title">自动化营销</view>
            </view>
            <view class="txt">
              <view class="dot"></view>
              <view class="txt-title">数字化门店</view>
            </view>
          </view>
          <view class="txt-box  top-b">
            <view class="txt">
              <view class="dot"></view>
              <view class="txt-title">智能化管理</view>
            </view>
            <view class="txt">
              <view class="dot"></view>
              <view class="txt-title">数据化分析</view>
            </view>
          </view>
        </view>
      </view>
      <view class="commonCut-off-rule"></view>
      <!-- 导航列表 -->
      <view class="topNavBox">
        <!-- <view class="shopServe">  先隐藏
          <view class="topNav1">
            <view class="shopManage" v-for="(i,index) in shopManageList" :key ="index" @click="gotoPages(i)">
              <view  class="boxDiv"></view>
              <view class="shoptxt">{{i.shoptxt}}</view>
            </view>
          </view>
        </view> -->
        <!-- 应用列表 -->
        <view class="toolServe">
          <view class="topNav">
            <view class="toolManage" v-for="(item, index) in toolManageList" :key="item.id" @click="secondLevel(item.url)">
              <image class="boxDiv2" :src="item.icon" mode=""></image>
              <view class="tooltxt">{{item.name}}</view>
            </view>
            <view class="toolManage" @click="moreApp">
              <image class="boxDiv2" src="/static/image/more.png" mode=""></image>
              <view class="tooltxt">更多</view>
            </view>
          </view>
        </view>
      </view>
    </view>
   
    <view class="agencyPageBox">
      <view class="agencyPage">
        <!-- 商城列表 -->
        <view class="storeListBox">
          <view class="storeList" v-for="(item,index) in storeList" :key = "item.id" @click="gotoShop(item)">
            <view class="storeItem">
              <view class="storetitle">{{item.storetitle}}</view>
              <view class="storeDescribe">{{item.storeDescribe}}</view>
              <view class="storeImg"><image :src="item.img" style="width: 70rpx; height: 70rpx;"></image></view>
            </view>
          </view>
        </view>
        <view class="logistics">
          <image style="width: 418rpx;height: 262rpx;text-align: center;" :src="imageUrlLogistics" mode=""></image>
        </view>
        <!-- 代理端页面 -->
        <block v-if="!storeInfo || (storeInfo && storeInfo.status != 1)">
          <view class="setUpStep" >
            <view class="setUpTitle">
              <view class="setUpT">2步轻松线上开店</view>
              <view class="setUpDescr">展示门店特色，营销良好口碑，吸引客流</view>
            </view>
            <view class="setUpTell">
              <view class="setUpTellNumBox">
                <view class="setUpTellNum">
                  <view class="num">1</view>
                </view>
                <view class="setUpTellTxt">资质认证</view>
              </view>
              <view class="setUpTellArrowsBox">
                <image style="width: 89rpx;height: 11rpx;" src="../../static/image/jiantou.png" mode=""></image>
              </view>
              <view class="setUpTellNumBox">
                <view class="setUpTellNum">
                  <view class="num">2</view>
                </view>
                <view class="setUpTellTxt">添加门店</view>
              </view>
            </view>
          </view>
          <view class="storeBtn">
            <button class="storeTxt" @click="addStore">去添加门店</button>
          </view>
        </block>
      </view>
      <view class="commonCut-off-rule"></view>
    </view>
    <!-- 学习成长 -->
    <view class="studyGrowup" v-show="studyTotal != 0">
      <view class="studyGrowuptxt">学习成长</view>
      <view class="studyBox">
        <view class="studyBoxImg">
          <image class="studyImg" style="height: 246rpx; width: 185rpx; border-radius: 10rpx;" :src="studyFrom.urlMain" mode=""></image>
        </view>
        <view class="studyBoxTxt">
          <view class="studyBoxTitle">{{studyFrom.activityName}}</view>
          <view class="studyBoxTime">
            <view class="timeTitle">
              <text>时间：</text>
              <text>{{studyFrom.startTime}}</text>
            </view>
          </view>
          <view class="timeTitle">
            <text>地点：</text>
            <text>{{studyFrom.districtName}}</text>
          </view>
          <view class="moneyBtn">
            <view class="">￥{{studyFrom.price}}</view>
            <view class="purchaseBtn" @click="gotoHuiWu(studyFrom)">
              <button class="btnTxt">立即报名</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="commonCut-off-rule"></view>
    <!-- 行业采购 -->
    <view class="industryShop">
      <view class="industryTxt">行业采购</view>
      <scroll-view scroll-x="true" style="margin: 20rpx 0; height: 60rpx;">
        <view class="common-tab">
          <view class="common-tab-text" :class="{active: item.id == tabNum, tabs: !item.id, text: item.id == tabNum}" style="white-space:nowrap;" v-for="(item, index) in tabList" :key ="item.id" @click="categoryShop(item.id)">{{item.name}}</view>
        </view>
      </scroll-view>
      <view class="shopList">
        <view class="gud" @click="gudClick">
          <image style="width: 340rpx;height: 200rpx;" src="../../static/image/caigousahngcheng.png"></image>
        </view>
        <view class="shopItem" v-for="(item,index) in shopList" :key='item.id' @click="shopClick(item)">
          <view class="shopItem-shop">
            <view class="shopItemImgBox">
              <image class="shopItemImg" :src="item.imageUrl"></image>
            </view>
            <view class="shopItemTxt">
              <view class="shopItemTitle">{{item.name}}</view>
              <view class="shopItemtxt">￥{{item.price}}</view>
              <view class="retailPrice">{{item.retailPrice}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="loading">{{loadingText}}</view>
    </view>
  </view>
</template>
<script>
import { PersonalCenter } from "@/service/user/user.service.js"
import { finduserApps,categoryAll,categoryShops,hotSale,queryFindPage } from "@/service/workbench/workbench.service.js"
import { getStoreInfo } from "@/service/storeManage/storeManage.service.js"
import { iosShare } from '@/mixin/index.mixin.js'
export default {
  mixins: [iosShare],
  data () {
    return {
      shopManageList: [
        {shoptxt:'门店管理', url: '/pages/storeManage/result'},
        {shoptxt:'爆品管理', url: '/pages/hotGoods/manage'},
        {shoptxt:'私域管理', url: null},
        {shoptxt:'收益管理', url: null},
        {shoptxt:'发现好店', url: '/pages/findShop/shopIndex'},
      ],
      toolManageList: [],
      storeList: [//代理端商城列表
        {index:0,img:'../../static/image/fuli.png',storetitle:'福利商城',storeDescribe:'分享有奖', herfUrlTest: 'http://testbuyerweb.tofire.cn/pages/welfareMall/welfareMall',herfUrl: 'http://buyerweb.tofire.cn/pages/welfareMall/welfareMall'},
        {index:1,img:'../../static/image/duihuan.png',storetitle:'兑换商城',storeDescribe:'分享有奖', 'herfUrlTest':'http://testbuyerweb.tofire.cn/pages/exchangeMall/exchangeMall',herfUrl: 'http://buyerweb.tofire.cn/pages/welfareMall/welfareMall'},
        {index:2,img:'../../static/image/caigou.png',storetitle:'采购商城',storeDescribe:'分享有奖', url: '/pages/purchaseShop/index'}
      ],
      imageUrlLogistics:this.$store.state.imgBaseUrl + '/logistics.png',
      bgImage: '/static/image/capacity.png',
      studyTotal:'',
      studyFrom: {},
      tabNum:'', //类目索引值
      tabList: [],//类目
      shopList: [],//商品列表
      pageInfo: {
        size:10,
        current:1
      },
      creatorValue:'', // 判断是否代理端
      loadingText: '加载中...',
      loadingFlag: false,
      storeInfo: null
    }
  },
  onShow() {
    this.creatorValue = uni.getStorageSync('homeType');
    uni.removeStorageSync('saveStoreInfo'); // 清除创建门店存储的地址
    this.getFinduserApps();
    this.getCategoryAll();
    this.getDatas();
    this.getQueryFindPage();
    this.getStoreInfo();
  },
  onReachBottom () {
    let _self = this;
    // 页面滚动到底部的事件
    _self.getMoreDatas();
  },
  methods: {
    getStoreInfo () {
      getStoreInfo({}, res => {
        this.storeInfo = res.data; // 存储店铺的信息
      })
    },
    gotoHuiWu (item) {
      // 跳转会务详情页
      // location.href = "http://192.168.2.155:8082/activityDetail?id=" + item.id + '&token=' + res.data;
      uni.getStorage({
        key: 'user_token',
        success: function (res) {
          let str = window.location.href;
          let strIndex = str.indexOf("//");
          let judge = str.substr(strIndex + 2,4);
          let mart = 'mart';
          if (judge === mart) {
            location.href = "http://act.tofire.cn/activityDetail?id=" + item.id + '&token=' + res.data;
          }else {
            location.href = "http://testact.tofire.cn/activityDetail?id=" + item.id + '&token=' + res.data;
          }
        }
      });
    },
    addStore () { // 添加门店
      if (!this.storeInfo) {
        uni.navigateTo({  // 未申请门店
          url: '/pages/storeManage/index'
        });
      } else if (this.storeInfo) {
        if (this.storeInfo.status == 1) { // 审核通过
          uni.navigateTo({
            url: '/pages/storeManage/success'
          });
        } else {
          uni.navigateTo({
            url: '/pages/storeManage/result'
          });
        }
      }
    },
    gotoShop (item) { // 跳转商城
      let str = window.location.href;
      let strIndex = str.indexOf("//");
      let judge = str.substr(strIndex + 2,4);
      let mart = 'mart';
      if (judge === mart) {
        if (item.herfUrl) {
          uni.getStorage({
            key: 'user_token',
            success: function (res) {
              location.href = item.herfUrl + '?token=' + res.data;
            }
          });
        }
      }else {
        if (item.herfUrlTest) {
          uni.getStorage({
            key: 'user_token',
            success: function (res) {
              location.href = item.herfUrl + '?token=' + res.data;
            }
          });
        }
      }
      if (item.url) {
        uni.navigateTo({
          url: item.url
        });
      };
    },
    getFinduserApps () {//获取所有应用
      finduserApps({}, res => {
        if (res.status == 0) {
          this.toolManageList = (res.data.defaultApps && res.data.defaultApps.length > 0) ? res.data.defaultApps.slice(0,9) : [];//截取数组的前九条数据
        }
      })
    },
    getCategoryAll () {//获取商品类目
      categoryAll({}, res => {
        if(res.status == 0) {
          this.tabList = res.data && res.data.length > 0 ? res.data : [];
          this.tabList = [{id: '', name: '全部'}].concat(this.tabList);
        }
      })
    },
    getMoreDatas () {
      if(!this.loadingFlag){
        return false;
      };
      this.pageInfo.current++;
      this.getDatas();
    },
    getDatas (id) {
      this.loadingText = '加载中...';
      uni.showLoading(); // 在当前页面显示导航条加载动画
      let params = this.pageInfo;
      params.tagId = id;
      categoryShops(params, res => {
        if(res.status == 0) {
          uni.hideLoading();
          // this.loadingFlag = false;
          // if(res.data.records.length == 0 && this.shopList.length == 0) {
          //   this.loadingFlag = false;
          //   uni.hideNavigationBarLoading();
          //   this.loadingText = '暂无数据';
          //   return false;
          // };
          if (this.pageInfo.current == 1) {
            this.shopList = res.data.records;
          } else {
            this.shopList = this.shopList.concat(res.data.records);
          };
          
          // uni.stopPullDownRefresh();
          // this.shopList.length == res.data.total ? this.loadingText = '已加载全部' : this.loadingText = '加载更多';
          if (this.shopList.length == res.data.total) {
            this.loadingFlag = false;
            this.loadingText = '已加载全部'
          } else {
            this.loadingFlag = true;
            this.loadingText = '加载更多'
          }
        } else {
          //  this.loadingText = '暂无数据';
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    categoryShop (id) { // 商品列表
      if (this.tabNum != id) {
        this.pageInfo.current = 1;
        this.tabNum = id;
        this.getDatas(id);
      }
    },
    getQueryFindPage () {  //学习成长
      let params = this.pageInfo;
      params.status = 1;
      queryFindPage(params,res => {
        if (res.status == 0) {
          this.studyTotal = res.data.total;
          this.studyFrom = res.data.records[0];
        }
      })
    },
    secondLevel(url) {
      if (url) {
        if(url == '/privateFlow/index') {
          PersonalCenter({},res => {
            if(res.status == 0) {
              if (res.data.isHaveStore == 1) {
                uni.navigateTo({
                  url: '/pages/privateFlow/index'
                });
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                });
              }
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          })
        };
        uni.navigateTo({
          url: url,
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      }
    },
    moreApp () {//应用查看更多
      uni.navigateTo({
        url: 'viewMore'
      });
    },
    gotoPages (val) { // 导航列表-应用跳转
      if (val.url) {
        uni.navigateTo({
          url: val.url
        });
      }
    },
    shopClick (item) { //点击商品跳转详情页
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + item.id
      });
    },
    gudClick () { //跳转到采购商城
      uni.navigateTo({
        url: '/pages/purchaseShop/index'
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .workBenchBox {
    background-color: #fff;
      padding-top: 20rpx;
    .workBenchNav {
      // padding: 110rpx 30rpx 0 30rpx;
      .topNavBox {
        padding-top: 16rpx;
        background-color: #FFFFFF;
        // box-shadow: 4rpx -2rpx 10rpx #ccc; //UI-阴影暂时先不写
        border-top-left-radius: 15rpx;
        border-top-right-radius: 15rpx;
        .shopServe {
          .topNav1 {
            display: flex;
            align-content: space-around;
            width: 100%;
            .shopManage {
              box-sizing: border-box;
              // flex: 0 0 25%;
              width: 25%;
              .boxDiv{//示例框
                width: 80rpx;
                height: 80rpx;
                margin: auto;
                background-color: #8F8F94;
                border-radius: 20rpx;
              }
              .shoptxt {
                margin-top: 16rpx;
                font-size: 24rpx;
                text-align: center;
              }
            }
          }
        }
        .toolServe {
          .topNav {
            width: 100%;
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            .toolManage {
              padding-top: 43rpx;
              box-sizing: border-box;
              flex: 0 0 20%; // flex属性的前两个值 0 0 表示 该元素无论如何都不改变
              text-align: center;
              .boxDiv2{
                margin: auto;
                width: 60rpx;
                height: 60rpx;
                border-radius: 20rpx;
              }
              .tooltxt {
                margin-top: 18rpx;
                font-size: 24rpx;
              }
            }
          }
        }
      }
      .sumManage {
        height: 270rpx;
        padding-left: 40rpx;
        padding-top: 28rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .sumManage-l {
          margin-top: 38rpx;
          .sumManage-l-t {
            font-size:46rpx;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(67,67,67,1);
          }
          .top-a {
            margin-top: 30rpx;
          }
          .top-b {
            margin-top: 10rpx;
          }
          .txt-box {
            display: flex;
            justify-content: space-between;
            width:330rpx;
            .txt {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .dot {
                width:6rpx;
                height:6rpx;
                background:rgba(102,102,102,1);
                border-radius:50%;
              }
              .txt-title {
                font-size:26rpx;
                margin-left: 10rpx;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(102,102,102,1)
              }
            }
          }
        }
      }
    }
    .studyGrowup {
      padding: 43rpx 0;
			margin: 0 30rpx;
      background-color: #FFFFFF;
      .studyGrowuptxt {
        // margin-top: 43rpx;
        font-size: 36rpx;
        color: #333;
      }
      // 学习成长
      .studyBox {
        // 盒子上左部分--图片
        margin-top: 31rpx;
          padding: 21rpx;
        box-shadow:0rpx 0px 21rpx 0rpx rgba(73,53,5,0.22);
        border-radius:15rpx;
        display: flex;
        // 盒子下半部分
        .studyBoxTxt {
          width: 100%;
          // position: relative;
          padding: 11rpx 25rpx;
          .studyBoxTitle {
            font-size: 28rpx;
          }
          .timeTitle text{
            font-size: 22rpx;
            color: #999;
          }
          .moneyBtn {
            display: flex;
            justify-content: space-between;
            margin-top: 45rpx;
            .purchaseBtn {
              .btnTxt {
                font-size: 24rpx;
                color: #F6DA99;
                background-color: #434343;
              }
            }
          }
        }
      }
    }
    //公共分割线
    .commonCut-off-rule {
      widows: 100%;
      height: 20rpx;
      background:rgba(250,250,250,1);
    }
    // 代理端页面样式
    .agencyPage {
      margin: 0 30rpx;
      background-color: #FFFFFF;
      // 列表部分 1
      .storeListBox {
        display: flex;
        justify-content: space-between;
        padding-top: 62rpx;
        .storeList {
          width:224rpx;
          height:117rpx;
          border:1rpx solid #E1E1E1;
          border-radius:10rpx;
          position: relative;
          .storeItem {
            padding: 15rpx 0 0 15rpx;
            .storetitle {
              font-size:24rpx;
              font-family:PingFang SC;
              font-weight:500;
              color:#333333;
            }
            .storeDescribe {
              font-size:22rpx;
              font-family:PingFang SC;
              font-weight:500;
              color:#999999;
            }
            .storeImg {
              position: absolute;
              right: 23rpx;
              bottom: -24rpx;
            }
          }
        }
      }
      .logistics {
        text-align: center;
      }
      // 开店步骤 2
      .setUpStep {
        // margin-top: 60rpx;
        .setUpTitle {
          text-align: center;
          .setUpT {
            font-size:36rpx;
            font-weight:600;
            color:#333333;
          }
          .setUpDescr {
            font-size:26rpx;
            color:#999999;
            margin-top: 24rpx;
          }
        }
        .setUpTell {
          display: flex;
          justify-content: space-between;
          margin-top: 47rpx;
          padding: 0 112rpx;
          .setUpTellNumBox {
            .setUpTellNum {
              width:46rpx;
              height:46rpx;
              margin: auto;
              background:#666666;
              border-radius:50%;
              .num {
                text-align: center;
                line-height: 46rpx;
                font-size:22rpx;
                font-weight:500;
                color:#FFFFFF;
              }
            }
          }
          .setUpTellTxt {
            margin-top: 12rpx;
            color: #666666;
            font-size:22rpx;
            font-weight:500;
          }
        }
      }
      .storeBtn {
        padding: 50rpx;
        .storeTxt {
          background-color: #434343;
          color: #F6DA99;
          font-size:30rpx;
          font-weight:500;
        }
      }
    }
    // 行业采购
    .industryShop {
      background-color: #FFFFFF;
      padding: 40rpx 20rpx;
      .industryTxt {
        font-size: 36rpx;
      }
			.tabs:first-child {
				margin-right: 50rpx;
			}
      .common-tab {
        // cursor: pointer;
        .common-tab-text {
          font-size: 30rpx;
          margin-right: 16rpx;
        }
				.tabs {
					margin-right: 50rpx;
				}
      }
      .gud {
        width: 340rpx;
        height: 200rpx;
        display: inline-block;
        break-inside:avoid;
      }
      .shopList {
        column-count:2;//必须加上break-inside: avoid;
        -webkit-column-break-inside:avoid;
        column-width:340rpx; //设置列宽
        column-gap:10rpx; //设置间隙
        .shopItem {
          height: 100%;
          overflow: auto;
          .shopItem-shop {
            break-inside: avoid;//这个很重要，不然会中断
            margin-bottom: 20rpx;
            border:1px solid #E1E1E1;
            background-color: #FAFAFA;
            border-radius:10rpx;
            position: relative;
            .shopItemImgBox {
              .shopItemImg {
                width: 100%; 
                height: 340rpx;
                text-align: center;
                border-top-left-radius: 10rpx;
                border-top-right-radius: 10rpx;
              }
            }
            .shopItemTxt {
              margin-left: 10rpx;
              .shopItemTitle {
                margin-top: 15rpx;
                font-size:28rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
              }
              .shopItemtxt {
                font-size: 36rpx;
                margin-top: 35rpx;
                margin-bottom: 15rpx;
              }
              .retailPrice {
                position: absolute;
                text-decoration:line-through;
                font-size:22rpx;
                color:rgba(153,153,153,1);
                line-height:35rpx;
                bottom: 15rpx;
                right: 25rpx;
              }
            }
          }
        }
        padding-bottom: 60rpx;
      }
			.loading {
				text-align: center;
				font-size: 26rpx;
				color: #999999;
			}
    }
  }
</style>
